<template>
  <div>
    <div v-if="params.enableMenu" ref="menuButton" class="customHeaderMenuButton" @click="onMenuClicked($event)">
      <i class="fa" :class="params.menuIcon"></i>
    </div>
    <div class="customHeaderLabel">{{ params.displayName }}</div>
    <div v-if="params.enableSorting" @click="onSortRequested('asc', $event)" :class="ascSort" class="customSortDownLabel" v-show="show.asc">
      <i class="ag-icon ag-icon-asc"></i></div>
    <div v-if="params.enableSorting" @click="onSortRequested('desc', $event)" :class="descSort" class="customSortUpLabel" v-show="show.desc">
      <i class="ag-icon ag-icon-desc"></i></div>
    <div v-if="params.enableSorting" @click="onSortRequested('enable', $event)" :class="noSort" class="customSortRemoveLabel" v-show="show.enable">
      <i class="ag-icon ag-icon-none"></i>
    </div>
  </div>
</template>
<script>
export default {
    data: function () {
        return {
            ascSort: null,
            descSort: null,
            noSort: null,
            show: {
                desc: false,
                asc: false,
                enable: true
            }
        };
    },
    beforeMount () {},
    mounted () {
        this.params.column.addEventListener('sortChanged', this.onSortChanged);
        this.onSortChanged();
    },
    methods: {
        onMenuClicked () {
            this.params.showColumnMenu(this.$refs.menuButton);
        },

        onSortChanged () {
            this.ascSort = this.descSort = this.noSort = 'inactive';
            if (this.params.column.isSortAscending()) {
                this.ascSort = 'active';
            } else if (this.params.column.isSortDescending()) {
                this.descSort = 'active';
            } else {
                this.noSort = 'active';
            }
        },

        onSortRequested (order, event) {
            this.show[order] = false;
            let input;
            if (order === 'enable') {
                this.show.desc = true;
                input = 'desc';
            } else if (order === 'desc') {
                this.show.asc = true;
                input = 'asc';
            } else {
                this.show.enable = true;
                input = 'desc';
            }
            this.$store.commit('SET_SORT', {name: this.params.displayName, key: input});
            // this.params.setSort(order, event.shiftKey);
        }
    }
};
</script>
